<template>
    <div class="container">
        <div class="login">
            <h3>锅圈后台管理系统</h3>
            <el-form :rules="rules" :model="info" ref="formrules" label-width="100px">
                <el-form-item label="账号：" prop="username">
                    <el-input placeholder="请输入用户名" clearable v-model="info.username">
                        <template #prefix>
                            <svg class="icon">
                                <use xlink:href="#icon-dengluzhanghao"></use>
                            </svg>
                        </template>

                    </el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input v-model="info.password" type="password" placeholder="请输入密码" show-password clearable>
                        <template #prefix>
                            <svg class="icon">
                                <use xlink:href="#icon-mima"></use>
                            </svg>
                        </template>
                    </el-input>

                </el-form-item>
                <el-form-item label="确认密码：" prop="password1">
                    <el-input v-model="info.password1" type="password" placeholder="请输入密码" show-password clearable>
                        <template #prefix>
                            <svg class="icon">
                                <use xlink:href="#icon-31mima"></use>
                            </svg>
                        </template>
                    </el-input>

                </el-form-item>
                <el-button type="primary" class="btn" @click="submitForm(formrules)">注册</el-button>

            </el-form>
            <router-link to="/login" class="change">已有账号，登陆</router-link>

        </div>
    </div>
</template>
<script lang="ts" setup>

import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import http from '../tools/axios';


const info = ref({
    username: '',
    password: '',
    password1: '',
})

// 检查密码 自定义规则
const checkPassword = (rule, value, callback) => {
    if (value !== info.value.password) {
        callback(new Error('两次密码不一致'))
    } else {
        callback()
    }
}

const rules = ref({
    username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 3, max: 10, message: '账号长度为3~10', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 3, max: 10, message: '密码长度为3~10', trigger: 'blur' },
    ],
    password1: [
        { required: true, message: '再次输入密码', trigger: 'blur' },
        { validator: checkPassword, trigger: 'blur' },
    ]

})



const router = useRouter()
const formrules = ref(null)

const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {

        if (valid) {
             // 使用axios向后端发送请求
            http.post('/product/register', info.value).then((res) => {
                console.log(res.data);
                ElMessage({
                    showClose: true,
                    message: '登陆成功',
                    type: 'success',
            })
            router.replace('/control')
        })

        } else {
            console.log('error submit!', fields)
        }
    })
}

</script>

<style scoped>
.container {
    width: 100vw;
    height: 100vh;
    background-image: url('../assets/login.jpg');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login {
    width: 450px;
    box-sizing: border-box;
    padding: 20px 60px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.login h3 {
    text-align: center;
}

.icon {
    width: 20px;
    height: 20px;
}

.btn {
    width: 330px;
    height: 35px;
    border-radius: 25px;
    /* 字体间距 */
    letter-spacing: 3px;
}



.change {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}
</style>